Component({
    /**
  *  骨架屏
  * - @author           狄兆璐
  * - @date             2018-12-02
  *  bgcolor            骨架屏颜色
  *  selector           选择器
  *  loading            渲染方式
  *  
  */
  properties: {
    bgcolor: {
      type: String,
      value: '#FFF'
    },
    selector: {
      type: String,
      value: 'skeleton'
    },
    loading: {
      type: String,
      value: 'spin'
    }
  },
  data: {
    loadingAni: ['spin', 'chiaroscuro'],
    systemInfo: {},
    skeletonRectLists: [],
    skeletonCircleLists: []
  },
  attached: function () {
    //默认的首屏宽高，防止内容闪现
    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      systemInfo: {
        width: systemInfo.windowWidth,
        height: systemInfo.windowHeight
      },
      loading: this.data.loadingAni.includes(this.data.loading) ? this.data.loading : 'spin'
    })
  },
  ready: function () {
    const that = this
    //绘制背景
    wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function (res) {
      if (res.length > 0) {
        that.setData({
          'systemInfo.height': res[0][0].height + res[0][0].top
        })
      }
    })

    //绘制矩形
    this.rectHandle()
  },
  methods: {
    rectHandle: function () {
      const that = this;
      //绘制不带样式的节点
      wx.createSelectorQuery().selectAll(`.${this.data.selector} >>>.${this.data.selector}-rect`).boundingClientRect().exec(function (res) {

        if (res.length > 0) {
          that.setData({
            skeletonRectLists: res[0]
          })
        }
      })
    }
  }
})